import React, { useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Descriptions, Button } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import { createStyles } from 'antd-style';
import { positionDetail } from '@/services/system/postmanagement';

const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    background: '#f5f5f5',
    minHeight: 'calc(100vh - 48px)',
  },
  card: {
    borderRadius: '8px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)',
  },
  title: {
    backgroundColor: '#1890ff',
    color: '#fff',
    padding: '8px 16px',
    marginBottom: '16px',
    width: '80%',
  },
  subTitle: {
    backgroundColor: '#bae7ff',
    padding: '4px 16px',
    marginBottom: '16px',
    width: '80%',
  },
  buttonWrapper: {
    display: 'flex',
    justifyContent: 'center',
    marginTop: '24px',
  }
}));

const PostManagementView: React.FC = () => {
  const { styles } = useStyles();
  const location = useLocation();
  const navigate = useNavigate();
  const { record } = location.state || {};

  useEffect(() => {
    const fetchData = async () => {
      if (!record?.id) return;

      try {
        const detailRes = await positionDetail({ positionId: record.id });
        if (detailRes.code === 200) {
          // 如果需要，可以在这里更新状态
          console.log('岗位详情:', detailRes.data);
        }
      } catch (error) {
        console.error('获取岗位详情失败:', error);
      }
    };

    fetchData();
  }, [record]);

  const handleBack = () => {
    navigate('/system/postmanagement');
  };

  return (
    <PageContainer>
      <div className={styles.container}>
        <Card className={styles.card}>
          <div className={styles.title}>岗位详情</div>
          <div className={styles.subTitle}>基本信息</div>
          <Descriptions column={2}>
            <Descriptions.Item label="岗位名称">{record?.positionName}</Descriptions.Item>
            <Descriptions.Item label="岗位编号">{record?.id}</Descriptions.Item>
            <Descriptions.Item label="岗位排序">{record?.sort}</Descriptions.Item>
            <Descriptions.Item label="状态">
              {record?.status === 0 ? '启用' : '禁用'}
            </Descriptions.Item>
          </Descriptions>

          <div style={{ marginTop: '24px' }}>
            <Descriptions column={1}>
              <Descriptions.Item label="岗位描述">
                {record?.description || '暂无描述'}
              </Descriptions.Item>
            </Descriptions>
          </div>

          <div className={styles.buttonWrapper}>
            <Button type="primary" onClick={handleBack}>
              返回
            </Button>
          </div>
        </Card>
      </div>
    </PageContainer>
  );
};

export default PostManagementView;
